<script lang="ts" setup>
import { vTooltip } from "@halo-dev/components";

withDefaults(
  defineProps<{
    tooltip?: string;
    selected?: boolean;
    disabled?: boolean;
    isActive?: boolean;
    visible?: boolean;
  }>(),
  {
    tooltip: undefined,
    selected: false,
    disabled: false,
    isActive: false,
    visible: true,
  }
);
</script>

<template>
  <div
    v-if="visible"
    v-tooltip="tooltip"
    class="editor-block__actions-button"
    :class="{
      'editor-block__actions-button--selected': selected,
      'editor-block__actions-button--active': isActive,
    }"
    :disabled="disabled"
  >
    <slot name="icon" />
  </div>
</template>

<style lang="scss">
.editor-block__actions-button {
  @apply cursor-pointer rounded-md bg-gray-50 p-1.5 hover:bg-gray-200;

  &--selected {
    @apply bg-gray-200;
  }

  &--active {
    @apply bg-gray-200;
  }
}
</style>
